<template>
  <div>
    <a-badge count="5">
      <a-avatar
        shape="square"
        size="large"
      />
    </a-badge>
    <a-badge
      count="0"
      show-zero
    >
      <a-avatar
        shape="square"
        size="large"
      />
    </a-badge>
    <a-badge>
      <template #count>
        <clock-circle-outlined style="color: #f5222d" />
      </template>
      <a-avatar
        shape="square"
        size="large"
      />
    </a-badge>
    <a-badge
      count="25"
      :number-style="{
      backgroundColor: '#fff',
      color: '#999',
      boxShadow: '0 0 0 1px #d9d9d9 inset',
    }"
    />
    <a-badge
      count="1009"
      :overflow-count="10000"
      :number-style="{ backgroundColor: '#52c41a' }"
    />
    <a-badge dot>
      你好
    </a-badge>
    <br />
    <a-badge status="success" />
    <br />
    <a-badge
      status="success"
      text="Success"
    />
    <a-badge
      :count="5"
      title="这里是鼠标放在状态点上时显示的文字"
    >
      <a-avatar
        shape="square"
        size="large"
      />
    </a-badge>
    <br />

    <a-badge
      color="#f50"
      text="#f50"
    />
    <a href="#">
      <a-badge count="5">
        <a-avatar
          shape="square"
          size="large"
        />
      </a-badge>
    </a>
    <a-badge-ribbon placement="start" text="Hippies" color="magenta">
    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
  </a-badge-ribbon>
    <div style="width: 50%;">
      <a-badge-ribbon
        text="Hippies"
        style="width: 100px;margin-top:-20px"
      >
        <a-card size="small">and raises the spyglass.</a-card>
      </a-badge-ribbon>
    </div>

  </div>
</template>

<script>
import { ClockCircleOutlined } from '@ant-design/icons-vue'
export default {
  name: '',
  components: { ClockCircleOutlined },
  data() {
    return {
    }
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
